<template>
    <div class="portend">
        <div class="top">
            <p>近期预告</p>
            <span>抢先关注精彩勿错过</span>
        </div>
        <div class="bottom">
            <img src="https://gw.alicdn.com/tfs/TB1BSi8VAT2gK0jSZFkXXcIQFXa-204-64.png_.webp?getAvatar=avatar" alt="" class="portendPlay">
            <div class="des">
                <div class="left">
                    <div class="top">
                        2月9日18点00分开播
                    </div>
                    <div class="bottom">
                        <img src="https://gw.alicdn.com/imgextra/i1/O1CN01uWj8yi26jHGnHIk5U_!!6000000007697-2-tps-27-33.png_.webp" alt="">
                        &nbsp;|&nbsp;值秒杀好品等你来享购~
                    </div>
                </div>
                <div class="right">
                    <img src="https://gw.alicdn.com/tfs/TB1Bdj2jmR26e4jSZFEXXbwuXXa-38-40.png_.webp?getAvatar=avatar" alt="">
                    关注
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"portend"
}
</script>

<style lang="scss" scoped>
    .portend {
        width: 7.23rem;
        margin: auto;
    }
    .portend>.top {
        height: 0.56rem;
        display: flex;
        align-items: flex-end;
        margin-bottom: 0.1rem;
    }
    .portend .top>p {
        font-size: 0.38rem;
        color: #fff;
   
    }
    .portend .top>span {
        font-size: 0.24rem;
        color: #efa6ad;
        margin-left: 0.15rem;
    }
    .portend>.bottom {
        width: 7.17rem;
        height: 4.03rem;
        position: relative;
        overflow: hidden;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;
        background: url("https://gw.alicdn.com/imgextra/i2/O1CN01Gsj79a1V1dnIrlm1H_!!6000000002593-2-tps-714-410.png_.webp") no-repeat center / 100%;
    }
    .portend>.bottom .portendPlay {
        width: 1.03rem;
        height: 0.33rem;
        position: absolute;
        top: 0.3rem;
        left: 0.3rem;
    }
    .portend>.bottom .des {
        width: 6.63rem;
        margin: 2.94rem auto 0;
        display: flex;
        justify-content: space-between;
    }
    .portend>.bottom .des .left .top {
        color: #fff;
        font-size: 0.35rem;
        margin-bottom: 0.15rem;
    }
    .portend>.bottom .des .left .bottom {
        color: #ffbf9e;
        font-size: 0.24rem;
        display: flex;
        align-items: center;
    }
    .portend>.bottom .des .left .bottom img{
        width: 0.23rem;
        height: 0.23rem;
    }
    .portend>.bottom .des .right {
        width: 1.61rem;
        height: 0.62rem;
        border-radius: 0.3rem;
        background: linear-gradient(223deg, #ff5d54, #ff3058);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
    }
    .portend>.bottom .des .right img {
        width: 0.3rem;
        height: 0.3rem;
        padding-right: 0.1rem;
    }
</style>